<template>
  <section class="pagination" v-show="page.total">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="page.total"
      background
    ></el-pagination>
  </section>
</template>
<script>
export default {
  name: 'pagination',

  props: {
    page: {
      type: Object,
      default() {
        return {
          total: 0,
        };
      },
    },

    pageSize: {
      type: Number,
      default: 10,
    },

    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },

    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 40, 50, 100];
      },
    },
  },

  data() {
    return {};
  },

  methods: {
    handleCurrentChange(...args) {
      this.$emit('currentChange', args);
    },

    handleSizeChange(...args) {
      this.$emit('sizeChange', args);
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  padding: 20px 0 0;
  display: flex;
  justify-content: flex-end;
}
</style>
